<!-- contain BEGIN -->
<div class="right-product right-full animate-time" [ngClass]="{ 'right-full': isActive , 'right-off': !isActive }">
    <div class="center-back right-back">

        <app-breadcrumb [breadcrumbInfo]="{ 'secondLevel' : '开放平台管理', 'threeLevel' : '授权范围管理' }"></app-breadcrumb>

        <!-- 操作 BEGIN -->
            <div class="button-group">
                <button type="button" 
                        class="btn btn-default btn-md" 
                        data-toggle="modal" 
                        data-target="#newlyAdded" 
                        (click)="add._serviceType();initService._init(1)"
                        *ngIf="right['scope-authorization']['create']"
                        >
                    <span class="glyphicon glyphicon-plus"></span>  
                    新增
                </button>
                <button type="button" 
                        class="btn btn-default btn-md yellow" 
                        data-toggle="modal" 
                        data-target="#delete"
                        [disabled]="removeTableService?._isEmpty()" 
                        *ngIf="right['scope-authorization']['batchDelete']"
                        >
                    <span class="glyphicon glyphicon-trash"></span> 批量删除
               </button>
                <!-- 检索 BEGIN -->
                    <div class="input-group pull-right search-width" *ngIf="right['scope-authorization']['query']">
                        <input type="text" 
                               class="form-control search-input" 
                               placeholder="请输入服务名称" 
                               (keydown.enter)="_retrieval(queryCriteria.value)"
                               #queryCriteria="ngModel"
                               ngModel
                               >
                        <span class="input-group-addon search-btn" 
                              (click)="_retrieval(queryCriteria.value)"
                              >
                            <img src="../assets/right-product/search.png">检索
                        </span>
                    </div>
                <!-- 检索 END -->
            </div>
        <!-- 操作 END -->

        <div class="container-fluid">
            <!-- 表格 BEGIN -->
                <app-scopes-table #table></app-scopes-table>
            <!-- 表格 END -->

            <!-- 分页 BEGIN -->
                <app-pagination [getTotalItems]="table.total"
                                (isLoadTableFromPagination)="_pagination($event)"
                                >
                </app-pagination>
            <!-- 分页 END -->      
        </div>

    </div>
</div>
<!-- contain END -->

<!-- 新增 BEGIN -->
    <scopes-newly-added #add (onSubmit)="table._table()"></scopes-newly-added>
<!-- 新增 END -->

<!-- 删除 BEGIN -->
    <scopes-delete (delete)="table._table()"></scopes-delete>
<!-- 删除 BEGIN -->
